// subpackagesA/pages/room-monitoring-detail/room-monitoring-detail.ts
import { getEchats } from '../../../api/room-monitoring';
import * as echarts from "../../../component/ec-canvas/echarts";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    roomId: 0,
    data:[],
    ec: {
      lazyLoad: true,
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(e) {
    this.setData({
      roomId: e.roomId
    })
  },
  getData() {
    const comID = wx.getStorageSync("userInfo").data.comID;
    const roomId = this.data.roomId;
    getEchats(comID, roomId).then(res => {
      this.setData({
        data:res.data
      })
      this.initEcharts(res.data)
    })
  },
  initEcharts(newVal) {
    this.lineComponent = this.selectComponent("#line-chart");
    this.lineComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr,
      });
      chart.setOption({
        title: {
          text: "室温曲线",
          left: 0,
          top: 0,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          icon: "rect",
          right: "center",
          top: 40,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          top: "80px",
          left: "0px",
          right: "0px",
          bottom: "70px",
          width: 350,
          height:200,
          // height: '170',
          // top: 100,
          // left:'5%',
          containLabel: true,
        },
        xAxis: {
          type: 'time',
          min: newVal[0].update_Time,
          max: newVal[newVal.length - 1].update_Time,
          axisLabel: {
            interval: (index, value) => {
              if (!value.includes("00")) {
                return value
              } else {
                return ""
              }
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000"
            }
          }
        },
        yAxis: [
          {
            name: "°C",
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                // color: "#fff",
              },
            },
            splitLine: { show: false },
          },
        ],
        series: [
          {
            type: "line",
            data: newVal.map((item) => {
              return [item.update_Time, item.tmp_INDOOR]
            }),
          },
        ],
      });
      return chart;
    });
  },
  onClickLeft(){
    wx.navigateBack({
      delta:1
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getData();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})